<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	
</style>
<body>
	
<form id='fid' action='go.php'>
	<p>用户名：</p>
	<p><input type="text" name="" id='ipt' value='xiaojin' ></p>
	<p>密码：</p>
	<p><input type="text" name="" value='123456'></p>
	<p>验证码</p>
	<p><input type="" name=""></p>
	<p>
		<input type="submit" name="" value='ok'>
		<input type="reset" name="" value='cancel'>
	</p>
</form>



<form>
	<p>选择：</p>
	<p>
		<select id='s1'>
			<option value='apple'>apple</option>
			<option value='orange'>orange</option>
			<option value='potato'>potato</option>
			<option value='tomato' >tomato</option>
		</select>
	</p>
	<h3>please be sure your chocie:<span id='s2'></span></h3>
</form>
</body>
<script type="text/javascript">
	//onchange主要用于下拉框
s1obj=document.getElementById('s1');
s2obj=document.getElementById('s2');
s1obj.onchange=function(){
	val=this.value;
	s2obj.innerHTML=val;
}



//表单提交
fidobj=document.getElementById('fid');
fidobj.onsubmit=function(){
	r=confirm('are sure to submit?');
	if(!r){
		return false;
	}
}
//表单重置，记得ID是写在form表单而不是写在button上面
fidobj.onreset=function(){
	r=confirm('are you sure to reset?');
	if(!r){
		return false;
	}
}

iptobj=document.getElementById('ipt');
//被选中时发生的事件
iptobj.onselect=function(){
	this.value='user1';
}
//获得焦点
iptobj.onfocus=function(){
	this.style.outlineColor='#0f0';
	this.value='';
	this.select();
}
//失去焦点
iptobj.onblur=function(){
	val=this.value;
	if(val.length<3){
		alert('wrong');
	}
}
//内容改变
iptobj.onchange=function(){
	alert('not stop');
}
</script>
</html>